@import "config";
.homepage{
  text-align: center;
  padding-top: hr(235);
  color: $yellow;
  .logo{
    height: hr(40);
    margin-bottom: hr(40);
  }
  h1{
    font-size: hr(90);
    font-weight: bold;
  }
  .text-btn{
    margin-top: hr(30);
  }
  .diy{
    margin-top: hr(100);
  }
}
.diy-desk-box,.get-wine-box{
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  & > div{
    height: 100%;
    transition: $tiSoSlow;
  }
}
.rule{
  color: $yellow;
  padding: hr(20) hr(50);
  overflow: hidden;
  .rule-text{
    height: hr(870);
    overflow-x: hidden;
    .title{
      font-size: hr(24);
      font-weight: bold;
      margin: hr(20) 0 hr(15);
    }
    p{
      font-size: hr(18);
      line-height: hr(28);
      text-align: justify;
    }
  }
  .text-btn{
    margin-top: hr(20);
  }
}
.diy-box{
  padding-top: hr(20);
}
.get-wine{
  color: $yellow;
  height: 100%;
  padding: hr(35) hr(45);
  position: relative;
  transition: $tiSoSlow;
  #cuted{
    position: absolute;
    top: hr(35);
    left: hr(45);
    z-index: 1;
  }
  .map{
    margin-top: hr(60);
    height: hr(400);
    text-align: center;
    position: relative;
    & > div.pro-animate {
      transition: $ti;
      transform: scale(1);
      & > div{
        transition: $ti;
        transform: translateY(0);
      }
    }
    & > div{
      width: hr(540);
      height: 100%;
      position: relative;
      margin: 0 auto;
      transform: scale(0);
      & > div{
        width: hr(66);
        height: hr(90);
        position: absolute;
        background: url("../img/weizhi.png") no-repeat center/100% 100%;
        color: $red;
        padding-top: hr(15);
        font-size: hr(14);
        margin: hr(-90) 0 0 hr(-33);
        transform: translateY(hr(-666));
        em{
          font-size: hr(20);
          line-height: hr(18);
        }
      }
      &.hainan{
        position: absolute;
        top: 0;
      }
      &.hainan img{
        margin-top: hr(-65);
      }
      .shaoguan{
        top: hr(45);
        left: hr(300);
      }
      .maoming{
        top: hr(260);
        left: hr(90);
      }
      .yangjiang{
        top: hr(260);
        left: hr(160);
      }
      .haikou{
        top: hr(8);
        left: hr(428);
      }
      .sanya{
        top: hr(295);
        left: hr(185);
      }
    }
  }
  .stay-get{
    text-align: right;
    position: absolute;
    top: hr(370);
    right: hr(25);
    .text{
      font-size: hr(32);
      em{
        font-size: hr(55);
      }
    }
    em,.headline{
      font-size: hr(42);
      font-weight: bold;
    }
  }
  .title{
    font-size: hr(24);
    font-weight: bold;
    margin: hr(20) 0 hr(15);
  }
  & > p{
    font-size: hr(18);
    line-height: hr(28);
    text-align: justify;
  }
  #find-lately{
    margin-top: hr(25);
  }
}
.lately-map{
  height: 100%;
  color: $yellow;
  position: relative;
  .content{
    @include posAbsCenter;
    #map{
      width: hr(480);
      height: hr(450);
      background-color: $yellow;
      margin: 0 auto hr(40);
      color: #000;
      position: relative;
      .no-wang{
        color: $red;
        padding: 0 hr(20);
        @include posAbsCenter;
      }
    }
    .info-title {
      color: white;
      font-size: hr(24);
      text-indent: hr(5);
      background-color:blue;
      height: hr(40);
      line-height: hr(40);
    }
    .info-content p{
      width: hr(350);
      padding: hr(5);
      text-align: left;
      color: #666;
      line-height: hr(30);
      font-size: hr(24);
      word-break: break-all;
    }
    p{
      width: hr(480);
      font-size: hr(30);
      text-align: center;
    }
  }
}
.exchange-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

@keyframes pro-an {
  from{transform: scale(0)}
  to{transform: scale(1)}
}